const Star = Vue.defineComponent({
	props: { //接收父组件的参数
		value: Number
	},
	data() {
		return {
			hoverIdx: this.value || 0,
			rate: this.value || 0
		}
	},
	watch:{
		rate(){
		this.$emit('update:value',this.rate)
		}
	}
	template: `
			<ul class="star">
				<li v-for="i in 5" :key="i"@mouseenter="hoverIdx = i"
				@mouseleave="hoverIdx = rate" @click="rate = i">
					<img v-if="i <= hoverIdx" src="images/star.png" alt="">
					<img v-else src="images/star-off.png" alt="">
				</li>
				<li>{{ rate }}分</li>
			</ul>
		</div>
	`
})